import React from "react";
import { render } from "react-dom";
let data = ["img/img_01.jpg", "img/img_02.jpg", "img/img_03.jpg", "img/img_04.jpg"];
class Banner extends React.Component {
    constructor(props) {
        super(props);
        // this.num = 0;
        this.state = {
            list: props.list,
            num: 0
        };
        // console.log(this.state)
    }
    render() {
        return React.createElement(
            "div",
            { className: "banner" },
            React.createElement(
                "ul",
                null,
                this.state.list.map((item, index) => {
                    let oDom = null;
                    this.state.num === index ? oDom = React.createElement(
                        "li",
                        { key: index },
                        React.createElement("img", { src: item, alt: "" })
                    ) : oDom = null;
                    return oDom;
                })
            ),
            React.createElement(
                "ol",
                { className: "btn" },
                this.state.list.map((item, index) => {
                    if (this.state.num === index) {
                        return React.createElement(
                            "li",
                            { key: index, className: "active" },
                            index + 1
                        );
                    } else {
                        return React.createElement(
                            "li",
                            { key: index },
                            index + 1
                        );
                    }
                })
            ),
            React.createElement(
                "div",
                { className: "btns" },
                React.createElement(
                    "span",
                    { onClick: this.delNum.bind(this) },
                    "<"
                ),
                React.createElement(
                    "span",
                    { onClick: this.addNum.bind(this) },
                    ">"
                )
            )
        );
    }
    addNum() {
        this.state.num++;
        if (this.state.num > this.state.list.length - 1) {
            this.state.num = 0;
        }
        this.setState({ num: this.state.num });
        // console.log(this.state.num)
    }
    delNum() {
        this.state.num--;
        if (this.state.num < 0) {
            this.state.num = this.state.list.length - 1;
        }
        this.setState({ num: this.state.num });
    }
}
render(React.createElement(Banner, { list: data }), document.getElementById("box"));
